<template>
	<view class="container">
		<view class="header">个人资料</view>
		<view class="form">
			<!-- 头像上传 -->
			<view class="form-item">
				<text>头像</text>
				<image :src="avatar" class="avatar" @click="chooseAvatar"></image>
			</view>

			<!-- 昵称 -->
			<view class="form-item">
				<text>昵称</text>
				<input v-model="username" placeholder="请输入昵称" />
			</view>

			<!-- 个性签名 -->
			<view class="form-item">
				<text>个性签名</text>
				<textarea v-model="signature" placeholder="请输入个性签名"></textarea>
			</view>

			<!-- 保存按钮 -->
			<button class="save-button" @click="saveProfile">保存</button>
		</view>
	</view>
</template>

<script>
// 个人资料页面 script
export default {
  data() {
    return {
      avatar: '',        // 头像
      username: '',      // 用户名
      signature: ''      // 个性签名
    };
  },
  onLoad() {
    // 初始化数据，读取本地缓存
    const userInfo = uni.getStorageSync('userInfo') || {};
    this.avatar = userInfo.avatar || '/static/山师.jpg';
    this.username = userInfo.username || 'AI笔记用户';
    this.signature = userInfo.signature || '努力学习，共同进步！';
  },
  methods: {
    // 保存个人资料
    saveProfile() {
      const userInfo = {
        avatar: this.avatar,
        username: this.username,
        signature: this.signature
      };
      uni.setStorageSync('userInfo', userInfo); // 保存到本地缓存
      uni.showToast({ title: '资料已更新', icon: 'success' });

      // 返回到上一页
      uni.navigateBack();
    }
  }
};

</script>

<style scoped>
.container {
	padding: 30rpx;
	background: #f7f8fa;
	min-height: 100vh;
}
.header {
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}
.form {
	background: #fff;
	padding: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}
.form-item {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	justify-content: space-between;
}
.form-item text {
	width: 30%;
	font-size: 32rpx;
	color: #333;
}
.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	border: 2rpx solid #ccc;
}
input, textarea {
	flex: 1;
	border: 1px solid #ddd;
	padding: 10rpx;
	border-radius: 8rpx;
	font-size: 28rpx;
}
.save-button {
	background-color: #7e57c2;
	color: #fff;
	text-align: center;
	padding: 20rpx;
	border-radius: 12rpx;
	font-size: 32rpx;
	margin-top: 20rpx;
}
</style>
